<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情 - 泡泡玛特</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }

        :root {
            --primary: #8a2be2;
            --secondary: #ff6ec7;
            --accent: #00c8ff;
            --light: #f9f5ff;
            --dark: #2a0a4a;
        }

        body {
            background-color: #f8f7fc;
            color: #333;
            overflow-x: hidden;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* 头部导航 */
        header {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            box-shadow: 0 4px 12px rgba(138, 43, 226, 0.2);
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        .header-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
        }

        .logo {
            display: flex;
            align-items: center;
            color: white;
            text-decoration: none;
            font-size: 28px;
            font-weight: 800;
        }

        .logo i {
            margin-right: 10px;
            font-size: 32px;
        }

        .search-bar {
            flex: 1;
            max-width: 600px;
            margin: 0 30px;
            position: relative;
        }

        .search-bar input {
            width: 100%;
            padding: 12px 20px;
            border-radius: 30px;
            border: none;
            font-size: 16px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        .search-bar button {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            background: var(--accent);
            border: none;
            color: white;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            cursor: pointer;
        }

        .nav-icons {
            display: flex;
            gap: 20px;
        }

        .nav-icon {
            color: white;
            font-size: 22px;
            position: relative;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .nav-icon-text {
            font-size: 16px;
            font-weight: 500;
        }

        .cart-count {
            position: absolute;
            top: -8px;
            right: -8px;
            background: var(--accent);
            color: white;
            font-size: 12px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }

        /* 主菜单 */
        .main-nav {
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
        }

        .main-nav ul {
            display: flex;
            list-style: none;
            padding: 12px 0;
        }

        .main-nav li {
            margin-right: 30px;
        }

        .main-nav a {
            color: white;
            text-decoration: none;
            font-weight: 600;
            font-size: 16px;
            padding: 8px 0;
            position: relative;
        }

        .main-nav a:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--accent);
            transition: width 0.3s;
        }

        .main-nav a:hover:after {
            width: 100%;
        }

        /* 商品详情区域 */
        .product-detail {
            display: flex;
            gap: 30px;
            margin: 40px 0;
        }

        .product-image {
            flex: 1;
            max-width: 500px;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }

        .product-image img {
            width: 100%;
            height: auto;
            display: block;
        }

        .product-info {
            flex: 1;
        }

        .product-info h2 {
            font-size: 32px;
            margin-bottom: 15px;
            color: var(--dark);
        }

        .product-info p {
            color: #777;
            font-size: 16px;
            margin-bottom: 20px;
            line-height: 1.6;
        }

        .product-price {
            font-size: 28px;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 20px;
        }

        .quantity-control {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

        .quantity-control button {
            width: 30px;
            height: 30px;
            border: none;
            background: var(--accent);
            color: white;
            font-size: 18px;
            cursor: pointer;
        }

        .quantity-control input {
            width: 50px;
            height: 30px;
            text-align: center;
            border: 1px solid #ccc;
            margin: 0 10px;
        }

        .add-to-cart-btn {
            display: inline-block;
            padding: 12px 32px;
            background: var(--primary);
            color: white;
            text-decoration: none;
            font-weight: 600;
            border-radius: 30px;
            transition: all 0.3s;
            box-shadow: 0 4px 15px rgba(138, 43, 226, 0.4);
        }

        .add-to-cart-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(138, 43, 226, 0.6);
        }

        /* 立即购买按钮 */
        .buy-now-btn {
            display: inline-block;
            padding: 12px 32px;
            background: var(--secondary);
            color: white;
            text-decoration: none;
            font-weight: 600;
            border-radius: 30px;
            transition: all 0.3s;
            box-shadow: 0 4px 15px rgba(255, 110, 199, 0.4);
            margin-left: 10px;
        }

        .buy-now-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(255, 110, 199, 0.6);
        }

        /* 页脚 */
        footer {
            background: var(--dark);
            color: white;
            padding: 60px 0 30px;
            margin-top: 60px;
        }

        .footer-content {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
        }

        .footer-column h3 {
            font-size: 20px;
            margin-bottom: 20px;
            position: relative;
            padding-bottom: 10px;
        }

        .footer-column h3:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 40px;
            height: 3px;
            background: var(--accent);
        }

        .footer-column ul {
            list-style: none;
        }

        .footer-column ul li {
            margin-bottom: 12px;
        }

        .footer-column a {
            color: #ccc;
            text-decoration: none;
            transition: all 0.3s;
        }

        .footer-column a:hover {
            color: var(--accent);
            padding-left: 5px;
        }

        .social-links {
            display: flex;
            gap: 15px;
            margin-top: 20px;
        }

        .social-links a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            color: white;
            font-size: 18px;
            transition: all 0.3s;
        }

        .social-links a:hover {
            background: var(--accent);
            transform: translateY(-5px);
        }

        .copyright {
            text-align: center;
            padding-top: 30px;
            margin-top: 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: #aaa;
            font-size: 14px;
        }

        /* 响应式设计 */
        @media (max-width: 900px) {
            .product-detail {
                flex-direction: column;
            }

            .product-image {
                max-width: 100%;
            }

            .footer-content {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 768px) {
            .header-top {
                flex-direction: column;
                gap: 15px;
            }

            .search-bar {
                margin: 10px 0;
                max-width: 100%;
            }

            .main-nav ul {
                overflow-x: auto;
                padding-bottom: 5px;
            }

            .nav-icon-text {
                display: none;
            }
        }

        @media (max-width: 480px) {
            .footer-content {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
<!-- 顶部导航 -->
<header>
    <div class="container">
        <div class="header-top">
            <a href="index.html" class="logo">
                <i class="fas fa-gem"></i>
                POP MART
            </a>

            <div class="search-bar">
                <input type="text" placeholder="搜索潮玩、艺术家系列...">
                <button><i class="fas fa-search"></i></button>
            </div>

            <div class="nav-icons">
                <!-- 登录状态显示 -->
                <div class="nav-icon" id="userIcon">
                    <i class="fas fa-user"></i>
                    <span class="nav-icon-text" id="loginText">登录</span>
                </div>
                <div class="nav-icon">
                    <i class="fas fa-heart"></i>
                    <span class="nav-icon-text">收藏</span>
                </div>
                <div class="nav-icon">
                    <i class="fas fa-shopping-cart"></i>
                    <span class="cart-count" id="cartCount">0</span>
                    <span class="nav-icon-text">购物车</span>
                    <a href="cart.html?userId=1" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></a>
                </div>
            </div>
        </div>

        <nav class="main-nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">热门分类</a></li>
                <li><a href="#">新品上市</a></li>
                <li><a href="#">热门系列</a></li>
                <li><a href="#">盲盒专区</a></li>
                <li><a href="#">艺术家</a></li>
                <li><a href="#">限定商品</a></li>
                <li><a href="#">促销活动</a></li>
                <li><a href="#">会员中心</a></li>
            </ul>
        </nav>
    </div>
</header>

<!-- 商品详情区域 -->
<div class="container">
    <div class="product-detail" id="productDetail">
        <!-- 商品图片 -->
        <div class="product-image">
            <img src="https://via.placeholder.com/500" alt="商品图片">
        </div>
        <!-- 商品信息 -->
        <div class="product-info">
            <h2 id="productName">商品名称</h2>
            <p id="productDes">商品描述</p>
            <p class="product-price" id="productPrice">¥0.00</p>
            <div class="quantity-control">
                <button id="decreaseQuantity">-</button>
                <input type="number" id="quantity" value="1" min="1">
                <button id="increaseQuantity">+</button>
            </div>
            <a href="#" class="add-to-cart-btn" id="addToCartBtn">加入购物车</a>
            <a href="#" class="buy-now-btn" id="buyNowBtn">立即购买</a>
        </div>
    </div>
</div>

<!-- 页脚 -->
<footer>
    <div class="container">
        <div class="footer-content">
            <div class="footer-column">
                <h3>关于我们</h3>
                <ul>
                    <li><a href="#">品牌故事</a></li>
                    <li><a href="#">企业文化</a></li>
                    <li><a href="#">联系我们</a></li>
                    <li><a href="#">加入我们</a></li>
                    <li><a href="#">门店查询</a></li>
                </ul>
            </div>

            <div class="footer-column">
                <h3>客户服务</h3>
                <ul>
                    <li><a href="#">常见问题</a></li>
                    <li><a href="#">配送说明</a></li>
                    <li><a href="#">退换政策</a></li>
                    <li><a href="#">会员制度</a></li>
                    <li><a href="#">防伪查询</a></li>
                </ul>
            </div>

            <div class="footer-column">
                <h3>商务合作</h3>
                <ul>
                    <li><a href="#">IP合作</a></li>
                    <li><a href="#">渠道合作</a></li>
                    <li><a href="#">媒体合作</a></li>
                    <li><a href="#">企业采购</a></li>
                    <li><a href="#">展会活动</a></li>
                </ul>
            </div>

            <div class="footer-column">
                <h3>关注我们</h3>
                <p>获取最新潮玩资讯和独家优惠</p>
                <div class="social-links">
                    <a href="#"><i class="fab fa-weibo"></i></a>
                    <a href="#"><i class="fab fa-weixin"></i></a>
                    <a href="#"><i class="fab fa-qq"></i></a>
                    <a href="#"><i class="fab fa-douban"></i></a>
                    <a href="#"><i class="fab fa-tiktok"></i></a>
                </div>
            </div>
        </div>

        <div class="copyright">
            <p>© 2023 POP MART 泡泡玛特 版权所有 | 潮流玩具购物平台</p>
            <p>京ICP备12345678号 | 客服电话：400-123-4567</p>
        </div>
    </div>
</footer>

<script>

    document.addEventListener('DOMContentLoaded', async function() {
        // 获取 URL 中的商品 ID
        const urlParams = new URLSearchParams(window.location.search);
        const goodsId = urlParams.get('id');

        // 登录状态
        const savedUser = localStorage.getItem('popmartUser');
        let isLoggedIn = false;
        let userId = null;
        if (savedUser) {
            const user = JSON.parse(savedUser);
            isLoggedIn = true;
            userId = user.uId;
            // 更新页面上的用户信息显示
            const loginText = document.getElementById('loginText');
            if (loginText) loginText.textContent = user.uName;
        }

        if (goodsId) {
            try {
                // 从后端获取商品信息
                const response = await fetch(`/goods/${goodsId}`);
                if (!response.ok) {
                    throw new Error('获取商品信息失败');
                }
                const good = await response.json();

                // 更新页面上的商品信息
                document.getElementById('productName').textContent = good.gName;
                document.getElementById('productDes').textContent = good.gDes;
                document.getElementById('productPrice').textContent = `¥${good.gPrice}`;

                // 处理数量增减按钮
                const decreaseQuantityBtn = document.getElementById('decreaseQuantity');
                const increaseQuantityBtn = document.getElementById('increaseQuantity');
                const quantityInput = document.getElementById('quantity');

                decreaseQuantityBtn.addEventListener('click', function() {
                    const currentQuantity = parseInt(quantityInput.value);
                    if (currentQuantity > 1) {
                        quantityInput.value = currentQuantity - 1;
                    }
                });

                increaseQuantityBtn.addEventListener('click', function() {
                    const currentQuantity = parseInt(quantityInput.value);
                    quantityInput.value = currentQuantity + 1;
                });

                // 处理加入购物车按钮
                const addToCartBtn = document.getElementById('addToCartBtn');
                addToCartBtn.addEventListener('click', async function() {
                    if (!isLoggedIn) {
                        window.location.href = 'login.html';
                        return;
                    }

                    const quantity = parseInt(quantityInput.value);
                    const response = await fetch('/goods/reduceStock', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        },
                        body: `goodsId=${goodsId}&quantity=${quantity}`
                    });

                    const result = await response.json();
                    if (result.success) {
                        // 库存减少成功，添加到购物车
                        const shop = {
                            uId: userId,
                            gId: goodsId,
                            sNum: quantity,
                            sPrice: good.gPrice * quantity
                        };

                        const cartResponse = await fetch('/shop/add', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json'
                            },
                            body: JSON.stringify(shop)
                        });

                        const cartResult = await cartResponse.json();
                        if (cartResult.success) {
                            alert('商品已成功加入购物车');
                        } else {
                            alert('添加到购物车失败');
                        }
                    } else {
                        alert('库存不足，无法加入购物车');
                    }
                });

                // 处理立即购买按钮
                const buyNowBtn = document.getElementById('buyNowBtn');
                buyNowBtn.addEventListener('click', async function() {
                    if (!isLoggedIn) {
                        window.location.href = 'login.html';
                        return;
                    }

                    const quantity = parseInt(quantityInput.value);

                    // 创建订单对象
                    const order = {
                        uId: userId,
                        gId: goodsId,
                        oNum: quantity,
                        oPrice: good.gPrice * quantity,
                        oStatus: 1 // 1 表示已支付
                    };

                    try {
                        // 创建订单
                        const response = await fetch('/order/create', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json'
                            },
                            body: JSON.stringify(order)
                        });

                        const result = await response.json();
                        if (result.success) {
                            // 减少库存
                            const stockResponse = await fetch('/goods/reduceStock', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/x-www-form-urlencoded'
                                },
                                body: `goodsId=${goodsId}&quantity=${quantity}`
                            });

                            const stockResult = await stockResponse.json();
                            if (stockResult.success) {
                                alert(`购买成功！订单号: ${result.data.oId}`);
                                // 跳转到订单页面
                                window.location.href = `order.html`;
                            } else {
                                alert('库存不足，购买失败');
                            }
                        } else {
                            alert('创建订单失败');
                        }
                    } catch (error) {
                        console.error('购买失败:', error);
                        alert('购买失败，请稍后重试');
                    }
                });

            } catch (error) {
                console.error('获取商品信息失败:', error);
                // 显示错误信息
                const productDetail = document.getElementById('productDetail');
                if (productDetail) {
                    productDetail.innerHTML = '<p class="error">加载商品失败，请稍后重试</p>';
                }
            }
        }
    });
</script>
</body>
</html>